<template>

  <div class="home">
    <el-container>
      <el-header>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1" ><img class="a" src="../tlc/img/快递 (1).png"/></el-menu-item>
             <el-menu-item index="0" class="z"><router-link :underline="false" to="/wlym"> 首页</router-link></el-menu-item>
              <el-menu-item index="2" class="z">物流服务</el-menu-item>
              <el-menu-item index="3" class="z">智能科技</el-menu-item>
              <el-menu-item index="4" class="z">服务支持</el-menu-item>
              <el-menu-item index="5" class="z">可持续发展</el-menu-item>
              <el-menu-item index="6" class="z">投资者关系</el-menu-item>
              <el-submenu index="2"  class="z">
              <template slot="title"  class="z">关于我们</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
              <el-menu-item index="2-3">选项3</el-menu-item>
              </el-submenu>
            <div class="dd"><router-link :underline="false" to="/login">快速登录/注册</router-link></div>
        </el-menu>

</el-header>
<br/>
 <el-carousel indicator-position="outside" >
  <br/>
    <el-carousel-item v-for="item in 1" :key="item">
      <img src="../tlc/img/lb.png" class="tp" style="width:100%"/>
    </el-carousel-item>
     <el-carousel-item v-for="item in 1" :key="item">
      <img src="../tlc/img/tp.png" class="tp" style="width:100%"/>
    </el-carousel-item>
         <el-carousel-item v-for="item in 1" :key="item">
      <img src="../tlc/img/2022_midaut_2_e15fca199e.png" class="tp" style="width:100%"/>
    </el-carousel-item>
 
  </el-carousel>

    <el-card class="box-card">
      <div  class="text item">
        <div style="margin-top: 5px;">
          <el-input placeholder="您可以输运输单号进行查询" v-model="input3" class="input-with-select">
           <el-button slot="append" icon="el-icon-search" @click="w()">搜索</el-button>
     
          </el-input>
      </div>
      </div>
    </el-card>
 
    
    <el-tabs v-model="activeName" stretch >
    <el-card class="box-card">
          <div  class="text item">
            <div style="margin-top: 5px;">  
          </div>
          </div>
        </el-card>
    <el-menu  :default-active="activeIndex2" class="wc" mode="horizontal"  @select="handleSelect"  background-color="#c7d6f9"
  text-color="#fff"
  active-text-color="#a0d919" style="width:100%">
      <el-menu-item index="4" class="a1"> <router-link :underline="false" to="/wljid"><img class="a" src="../tlc/img/004-查快递 (1).png"/><span class="zt">运单追踪</span></router-link><span></span></el-menu-item>
      <el-menu-item index="4" class="a2"> <router-link :underline="false" to="/wljij"><img class="a" src="../tlc/img/002-快递箱 (1).png"/><span class="zt">我要寄件</span></router-link><span></span></el-menu-item>
      <el-menu-item index="4" class="a3"> <router-link :underline="false" to="/pg"><img class="a" src="../tlc/img/005-收快递 (1).png"/><span class="zt">运费时效查询</span></router-link><span></span></el-menu-item>
      <el-menu-item index="4" class="a4"> <router-link :underline="false" to="/pg"><img class="a" src="../tlc/img/014-快递员.png"/><span class="zt">服务网点查询</span></router-link><span></span></el-menu-item>
</el-menu>
</el-tabs>
      <el-main><h1>物流服务介绍</h1>
       <el-tabs v-model="activeName1"  stretch  @tab-click="handleClick">
       <el-tab-pane label="快递服务" name="second" >
        <el-row>
          <el-col :span="8">
            <el-card :body-style="{ padding: '30px' }" class="ww">
            <img src="../tlc/img/7224.png" style="width:85%"/>
              <div style="padding: 14px;">
                <span>快递城特快</span>
                <div class="bottom clearfix">
                  <time class="time">为您提供“快速、准时、稳定”的高品质、门到门的标准快递服务</time>
                  <el-button type="text" class="button">操作按钮</el-button>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :span="8">
            <el-card :body-style="{ padding: '30px' }" class="w">
            <img src="../tlc/img/R2.png" style="width:80%"/>
              <div style="padding: 14px;">
                <span>快递标快</span>
                <div class="bottom clearfix">
                  <time class="time">为您提供“价格更优、时效稳定、托寄无忧、服务范围广”门到门的标准快递服务</time>
                  <el-button type="text" class="button">操作按钮</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row> 
       </el-tab-pane>
        
       <el-tab-pane label="快运服务" name="secon">
      <el-row>
          <el-col :span="8">
            <el-card :body-style="{ padding: '30px' }" class="ww">
            <img src="../tlc/img/ys.png" style="width:85%"/>
              <div style="padding: 14px;">
                <span>快递城特快</span>
                <div class="bottom clearfix">
                  <time class="time">为您提供“快速、准时、稳定”的高品质、门到门的标准快递服务</time>
                  <el-button type="text" class="button">操作按钮</el-button>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :span="8">
            <el-card :body-style="{ padding: '30px' }" class="w">
            <img src="../tlc/img/kd.png" style="width:80%"/>
              <div style="padding: 14px;">
                <span>快递标快</span>
                <div class="bottom clearfix">
                  <time class="time">为您提供“价格更优、时效稳定、托寄无忧、服务范围广”门到门的标准快递服务</time>
                  <el-button type="text" class="button">操作按钮</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row> 
       </el-tab-pane>

        <el-tab-pane label="冷运服务" name="third">
      <el-row>
          <el-col :span="8">
            <el-card :body-style="{ padding: '30px' }" class="ww">
            <img src="../tlc/img/23.png" style="width:85%"/>
              <div style="padding: 14px;">
                <span>快递城特快</span>
                <div class="bottom clearfix">
                  <time class="time">为您提供“快速、准时、稳定”的高品质、门到门的标准快递服务</time>
                  <el-button type="text" class="button">操作按钮</el-button>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :span="8">
            <el-card :body-style="{ padding: '30px' }" class="w">
            <img src="../tlc/img/R-C (7).png" style="width:80%"/>
              <div style="padding: 14px;">
                <span>快递标快</span>
                <div class="bottom clearfix">
                  <time class="time">为您提供“价格更优、时效稳定、托寄无忧、服务范围广”门到门的标准快递服务</time>
                  <el-button type="text" class="button">操作按钮</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row> 
        </el-tab-pane>
           </el-tabs>
      </el-main>

      <el-footer class="ss"> 
      <h1><img src="../tlc/img/11.png" style="width:100%"/></h1>
    </el-footer>
    </el-container>
  </div>
</template>

<script>
 export default {
    data() {
      return { 
        input3: '',
        activeName1: 'second',
        activeIndex: '1',
        activeIndex2: '1',
        
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      
      },
 }
</script>

<style scoped>
 .el-select .el-input {
    width: 50px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: rgb(254, 248, 248);
  }

.text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
float:left; 
position:absolute;
    font: 100;
    width: 500px;
    height: 130px;
 margin: 510px auto; 

  background-color: rgb(247, 248, 247);

  }



.tp{
    position: relative;
  height: 100%;
}

.el-carousel-item{
     position: relative;
  height: 800px;
}
.el-menu-demo{
   width: 1460px;
  margin: 16px auto; 
 

}
.ss{
  width: 1500px;
   position: relative;
}
.z{
   font-size: 18px;
   color: #000;
   
}
.wc{
    margin: 0px auto; 
  height: 95px;
  position: relative;

}
.w{
  width: 650px;
  height: 500px;
  position: relative;
    left: 280px;
    margin: -10px auto; 
   text-align: center;
}
.ww{
  width: 650px;
  height: 500px;
   position: relative;
    left: 80px;
    margin: -10px auto; 
   text-align: center;
}
.zt{

     margin: -25px auto; 
    text-align: center;
   font-size: 29px;
   color: #000;
     position: relative;
}
 .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }
  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
.a1{
  position: relative;
  left: 130px;
}
.a2{
  position: relative;
  left: 220px;
}
.a3{
  position: relative;
  left: 320px;
}
.a4{
  position: relative;
  left: 440px;
}

.el-icon-more{
text-align: right;
   color: #0b1b0b;
   height: 30%;
   margin: 30px auto; 

}
.dd{
text-align: right;
}
el-menu-item{
  size: 0cm;
  color: #000;
}
.a{
     margin: -17px auto; 
     left: 50%;     
}

  .el-container{
     margin: -10px auto; 
     margin-left: -10px;
     margin-right: -10px;

  }
.el-header,
.el-footer {

  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 60px;
    border-radius: 4px
}

.el-aside {
  background-color: #c7d6f9;
  color: #333;
  text-align: center;
  line-height: 200px;
    border-radius: 4px
}

.el-main {
  background-color: #f4f6f9;
  color: #333;
  font-size: 25px;
  text-align: center;
  line-height: 40px;
    border-radius: 4px
}
.home{
  background-color:#f5f7fa

}
.demo-image__lazy{
     height: 440px;
     margin: -10px auto; 
     text-align: center;
}
.el-carousel__item h3 {
    position: relative;
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 900px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

</style>